<template>
	<div class="box1" >
		<div>
			<el-card shadow="always" class="box-card">
				<el-row :gutter="20">
					<el-col :span="3" :offset="1"><div class="grid-content bg-purple"><span>微圈管理</span></div></el-col>
					<el-col :span="9" :offset="11">
						<div class="grid-content bg-purple">
							<el-button size="mini">刷新</el-button>
							<el-button size="mini">返回</el-button>
						</div>
					</el-col>
				</el-row>
			</el-card>
		</div>
		<el-container>
				<el-aside width="150px" >
					<el-card shadow="always">
					<div class="box2">
						<!-- s左树 -->
						<el-tree :data="menu"
								 :props="defaultProps"
								 @node-click="shu"
								 default-expand-all="true"
						></el-tree>
					</div>
					</el-card>
				</el-aside>

			<el-main >
				<el-card shadow="always">
				<div class="box3">
					<!-- 模糊查 -->
					<el-form :inline="true" :model="formInline" class="demo-form-inline">
						<div class="dim_check">
							<el-collapse accordion>
								<el-collapse-item>
									<template slot="title">
										<i style="font-size: 25px;" class="el-icon-search"></i>
<!--										<el-form-item>-->
											<div style="margin-left: 85%">
												<el-button type="primary" @click.stop="onSubmit">查询</el-button>
											</div>
<!--										</el-form-item>-->
									</template>
									<div>
										<el-form-item label="输入文章名称" style="font-size: 20px; font-weight:bold">
											<el-input v-model="formInline.articleTitle" placeholder="请输入文章名称"></el-input>
										</el-form-item>
										<el-form-item label="用户账号" style="font-size: 20px; font-weight:bold">
											<el-input v-model="formInline.account" placeholder="请输入用户账号"></el-input>
										</el-form-item>
										<el-form-item label="用户昵称" style="font-size: 20px; font-weight:bold">
											<el-input v-model="formInline.trueName" placeholder="请输入用户昵称"></el-input>
										</el-form-item>
									</div>
								</el-collapse-item>
							</el-collapse>
						</div>
					</el-form>
					<!-- 数据表格 -->
					<div>
						<div style="background-color: #F3F3F3  ;height: 35px" >
							<span style="float:left;"><i style="font-size: 25px;" class="el-icon-s-unfold"></i>商品评论列表</span>
						</div>
						<el-table border :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
							<el-table-column type="selection" >

							</el-table-column>
							<el-table-column align="center" prop="microcircleId" label="编号" >

							</el-table-column>
							<el-table-column align="center" prop="trueName" label="用户昵称" >

							</el-table-column>
							<el-table-column align="center" prop="articleTitle" label="文章名称" >

							</el-table-column>
							<el-table-column align="center" prop="createDate" label="创建时间" >

							</el-table-column>
							<el-table-column align="center" prop="account" label="用户账号" >

							</el-table-column>
							<el-table-column align="center" prop="articleLike" label="点赞数" >

							</el-table-column>
							<el-table-column align="center" prop="zip"label="收藏数" >

							</el-table-column>
							<el-table-column align="center" prop="articleHits" label="查看量" >

							</el-table-column>
							<el-table-column align="center" prop="articleShare" label="分享量" >

							</el-table-column>
							<el-table-column align="center" prop="zip" label="排序(点赞量)">

							</el-table-column>
							<el-table-column fixed="right" label="操作" >
								<template slot-scope="scope">
									<!--@click="upd(scope.$index, tableData)"-->
									<el-button  type="text" size="small"><!--				路由拼接拿取id	:to="`/commentdetails/${scope.row.microcircleId}`					-->
										<router-link :to="`/commentdetails/${scope.row.microcircleId}`">查看</router-link>

									</el-button>
									<el-button
											@click.native.prevent="del(scope.row.microcircleId,scope.row)"
											type="text"
											size="small">
										删除
									</el-button>
								</template>
							</el-table-column>
						</el-table>
						<!-- 分页 -->
						<div>
							<el-pagination align='center'
										   @size-change="handleSizeChange"
										   @current-change="handleCurrentChange"
										   :current-page="currentPage"
										   :page-sizes="[1,5,10,20]"
										   :page-size="pageSize"
										   layout="total, sizes, prev, pager, next, jumper"
										   :total="tableData.length">
							</el-pagination>
						</div>
					</div>
				</div>
				</el-card>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	 export default {
	 	name:"LookTinyCircle",
	    data() {
	      return {
			tableData: [],//数据表格
	        menu: [],//树
			defaultProps:{
				children: 'children', //节点
				label: 'title' //名字
			},
			currentPage: 1, // 当前页码
			total: 20, // 总条数
			pageSize: 5 ,// 每页的数据条数
		    formInline: {
				articleTitle: '',
				trueName: '',
				account:''
			},
	      };
	    },
	    methods: {
	    	//删除按钮事件
			del(id,row) {
				this.$confirm('确认永久删除'+row.articleTitle+'文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.get("/Microcicle/delMicrocicle",{
						params:{
							"id":id
						},
					}).then(res=>{
						this.$router.go(0);

					});
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			// 模糊查询事件
		  onSubmit() {
			//获取表格里面的数据
			  this.$http.post("/Microcicle/getMicrocicle",this.formInline).then(ress=>{
				  this.tableData=ress.data.microcicle
				  // console.log(this.formInline)
				  console.log(ress.data)
			  })
		  },
		  getcourseclass(){ // 获取左树形组件的节点数据
		  		 this.$http.post("/JsCourseClass/getCourseClass").then(res=>{
		  		 	this.menu=res.data;
		  				// console.log(res.data)
		  			})
		  },

		   //每页条数改变时触发 选择一页显示多少行
		   handleSizeChange(val) {

			   this.currentPage = 1;
			   this.pageSize = val;
		   },
		   //当前页改变时触发 跳转其他页
		   handleCurrentChange(val) {

			   this.currentPage = val;
		   },
			//点击节点获取相对应的课程
			shu(data){
				this.$http.post("/Microcicle/getMicrocicle",
						{
							id:data.id
						}
			).then(ress=>{
					this.tableData=ress.data.microcicle
					// console.log(this.formInline)
					// console.log(ress.data)
				})
			},

	    },
		created(){//调取方法
			this.getcourseclass();  
			this.onSubmit();
		},
	  };
</script>

<style>
	.box-card{
		height: 60px;
	}
</style>